<template>
	<view>
		<view style="position:fixed;width: 100%;padding-bottom：30rpx;z-index:10" class="bg-white">
			<div style="height:30rpx;background-color: #fff"></div>
			<view :style="{height: statusBarHeight + 'px'}" class="bg-white"></view>
			<Title :title="title" class="bg-white" />
		</view>
		<view style="height:130rpx"></view>
		<view class="base-info">
		  <view class="left-avatar">
			  <view class="avatar">
				<image :src="getImageUrl(detailInfo.avatar)" mode="aspectFill" class="w-100 h-100" style="border-radius: 500rpx;"></image>
			  </view>
		  </view>
		  <!-- 单数 -->
			<view style="flex: 1;">
				<view class="flex mt-10">
				 <flag class="w-30 h-20 mr-4 ml-15" :country="detailInfo.country" />
				  <view class="name ellipsis_one">{{detailInfo[plang('username')]}}</view>
				</view>
					<view :class="langR == 'zh'?'between h-60':'between h-60 r_between'">
					  <p class="user-sty">
						
						{{
						[$t('供应商'),$t('经销商'),$t('货代公司'),$t('采购商'),$t('服务公司'),$t('报关公司'),$t('运输公司'),$t('国际物流公司'),$t('司机'),$t('服务商'),$t('俄罗斯个人'),$t('翻译员')][detailInfo.identity_type]
                 		 }}
						<!-- {{$t('采购商')}} -->
					</p>
						<view class="right-numwrap">
							<view class="getInfo" @click="inlineCall(detailInfo)">{{$t('联系TA')}}</view>
							<view class="getInfo" @click="callPhone(detailInfo)">
								{{$t('打电话')}}
								<image
									src="/static/translatexx.png"
									class="translatexxxxxx"
									mode="widthFix"
								/>
							</view>
						</view>
					</view>
				</view>
			</view>
		<u-form
			:model="model1"
			ref="model1"
			class="ml-20 mr-20 formSty"
		>
			<view class="contentBg mt-15">
					<u-form-item
						:border-bottom="false"
						prop="compensation_ratio"
						:required="true"
						:label="$t('选择赔付比例')"
						label-position="top"
						class="titleSty"
						style="position: relative;"
					>
						<!-- <u-input v-model="model1.compensation_ratio" @click="isShowUnit = true" type="text" placeholder="请选择赔付比例" :border="true" height="80" :auto-height="true" /> -->
						<view  @click="isShowUnit = true" class="flex-center bg-sss">
							<text>{{ model1.compensation_ratio }}</text>
						 </view>
					</u-form-item>
				<u-form-item :border-bottom="false"
					prop="reason"
					:required="true"
					:label="$t('申请原因')"
					label-position="top"
					class="titleSty"
					style="position: relative;"
				>
					<u-input v-model="model1.reason" type="textarea" :placeholder="$t('请填写申请原因')" :maxlength="1000" :border="true" height="240" :auto-height="true" />
						<p class="text-888 fz24" style="position: absolute; bottom: 50rpx; right: 20rpx;"> {{ remaining }} </p>
				</u-form-item>
				<u-form-item :border-bottom="false"
					prop="image_url"
					:required="true"
					:label="$t('上传图片') + $t('支持jpeg、jpg、png (大小7m内)')"
					label-position="top"
					class="titleSty"
				>
				<view class="uploads">
					<view class="img" v-for="(item, index) in model1.image_url" :key="index"
						@click="onPreview(item.fullurl)">
						<image :src="getImageUrl(item.fullurl)" mode="aspectFill" class="w-160 h-160" />
						<view class="delete" @click.stop="onDelete(index, 'image_url')">
							<view class="lien"></view>
						</view>
					</view>
					<view class="img" @click="onUpload({ type: 'image', size: 7, count: 3 })"
						v-if="model1.image_url.length < 3">
						<image src="/static/caigou/camera.png" mode="aspectFill" class="w-160 h-160" />
					</view>
				</view>
				</u-form-item>
				<u-form-item :border-bottom="false"
					label-position="top"
					:label="$t('上传视频') + $t('支持mp4、rmvb、AVI (大小35m内)')"
					class="titleSty"
				>
					<view class="uploads">
						<view class="img zhan" v-for="(item, index) in model1.video" :key="index"
							@click="onPreviewVideo(item.fullurl)">
							<image src="@/static/play.png" mode="aspectFill" class=""></image>
							<view class="delete" @click.stop="onDelete(index, 'video')">
								<view class="lien"></view>
							</view>
						</view>
						<view class="img" @click="onUpload({ type: 'video', size: 35, count: 1 })"
							v-if="model1.video.length < 1">
							<image src="@/static/videox.png" mode="aspectFill" class="w-160 h-160" />
						</view>
					</view>
				</u-form-item>
			</view>
			<view class="contentBg mt-15">
				<p class="fz28 text-010 font-bold pt-35">{{$t('平台协商意见')}}</p>
				<u-form-item
					:border-bottom="false"
					prop="compensation_ratio"
					:required="true"
					:label="$t('赔付比例')"
					label-position="top"
					class="titleSty"
					style="position: relative;"
				>
					<u-input v-model="plateValue" :disabled="true" type="text" placeholder="请选择赔付比例" :border="true" height="80" />
				</u-form-item>
			</view>
		</u-form>
		
		<!-- 播放视频 -->
		<uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
		  <view class="wrapper-video">
		    <video :src="previewVideoUrl" :show-center-play-btn="true" object-fit="cover" play-btn-position="center"
		      :controls="true" :autoplay="true" class="video-main">
		    </video>
		  </view>
		</uni-popup>
		
		 
		<view class="empty"></view>
		<view class="footer_btn4">
			<!-- <button class="btn_blue" :disabled="btnDis" @click="submit">提交</button> -->
			<view v-if="get(detailInfo, 'after_sales.buyer_agree_status') == 0 || get(detailInfo, 'after_sales.buyer_agree_status') == 1" class="footer-wrapper">
				<button v-if="get(detailInfo, 'after_sales.buyer_agree_status') == 0" :disabled="btnDis" class="btn blueBuy" @click="submit">{{$t('提交')}}</button>
				<button v-else :disabled="btnDis" class="btn blueBuy" @click="confirmPlate">{{$t('同意平台判定')}}</button>
			</view> 
			<view v-else class="footer-wrapper">
				<button :disabled="btnDis" class="btn bluePart" @click="confirmPlate">{{$t('同意平台判定')}}</button>
				<button :disabled="btnDis" class="btn green" @click="submit">{{$t('提交')}}</button>
			</view>
		</view>
		<u-select :confirm-text="$t('确定')" :cancel-text="$t('取消')" v-model="isShowUnit" :list="listUnits" @confirm="confirmUnit" value-name="id" label-name="name" ></u-select>
	</view>
</template>

<script>
	import Title from './components/title.vue'
	import { toService } from '@/api/basic'
	import { uploadFile, chooseFile } from '@/assets/public.js';
	import { purchaseDetaile, addAfterSales, afterSalesDetail, updateAfterSales } from '@/api/caigoOrder.js'
	import { request_minute } from '@/api/basic.js'
	import { chechkIm } from '@/api/basic.js'
	import {
		HTTP_REQUEST_URL,
		IMAGE_MAX_SIZE,
		IMAGE_MAX_COUNT,
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		components: {
			Title
		},
		data() {
			return {
				title: this.$t('申诉原因'),
				isShowUnit: false,
				showKind: false,
				btnDis: false,
				current: '',
				currentUnit: 0,
				plateValue: 30,
				statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
				videoItem: {},
				typeList: [],
				fileList2: [],
				fileList1: [],
				fileList3: [],
				listUnits: [
					{
						id: 1,
						name: 10
					},
					{
						id: 2,
						name: 20
					},
					{
						id: 3,
						name: 30
					},
					{
						id: 4,
						name: 40
					},
					{
						id: 5,
						name: 50
					},
					{
						id: 6,
						name: 60
					},
					{
						id: 7,
						name: 70
					},
					{
						id: 8,
						name: 80
					},
					{
						id: 9,
						name: 90
					},
					{
						id: 10,
						name: 100
					},
				],
				action: HTTP_REQUEST_URL + '/common/upload',
				imageMaxSize: IMAGE_MAX_SIZE,
				imageMaxCount: IMAGE_MAX_COUNT,
				max_count: 3,
				autoUpload: true,
				showUploadList: true,
				unitList: ['￥', '₽'],
				delBgColor: '#fa3534',
				delColor: '#ffffff',
				uploadText: this.$t('选择图片'),
				limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'],
				action: `${HTTP_REQUEST_URL}/common/upload`,
				kindList: [this.$t('代收付款'), this.$t('代办证件'), this.$t('签证'), this.$t('票务'), this.$t('现场监督'), this.$t('代理采购'), this.$t('医疗看病'), this.$t('代理销售')],
				typeName: '',
				city_name: '',
				priceImgList: [],
				videoList:[],
				imagesList: [],
				firstUpload: false,
				model1: {
					user_id: uni.getStorageSync("user_id"), // 用户id
					reason: '',
					image_url: [],
					video: [],
					compensation_ratio: 0
				},
				detailInfo: {},
				rules: {
					reason: [
						{ 
							required: true, 
							message: this.$t('请填写服务内容'), 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						}
					],
					compensation_ratio: [
						{ 
							required: true, 
							message: this.$t('请选择赔付比例'), 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
							type: 'number'
						}
					],
					image_url: [
						{ 
							required: true, 
							message: this.$t('请上传图片'), 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
							type: 'array'
						}
					],
				},
				maxLength: 1000,
				previewVideoUrl: ''
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.model1.setRules(this.rules)
		},
		mounted() {
			// this.getCcateProfessional()
		},
		onLoad(options) {
			if (options.orderNo) {
				this.model1.on = options.orderNo
			}
			if(options.order_id) {
				this.purchaseDetaile(options.order_id)
				this.afterSalesDetail(options.order_id)
			}
		  },
		computed: {
		  remaining() {
		    return this.maxLength - this.model1.reason.length;
		  },
		},
		methods: {
			inlineCall(info) {
				if(uni.getStorageSync("user_id") == info.user_id) {
					uni.showToast({
						title: this.$t('不能和自己聊天'),
						icon: "none",
					});
				} else {
					this.isMessageGo({
						action: 'initiateChat',
						data: info.user_id
					})
					return;
					chechkIm({
						send_uid: uni.getStorageSync("user_id"),
						receive_uid: info.user_id,
					}).then(res => {
						if (res.data.code == 1) {
							this.isMessageGo({
								action: 'initiateChat',
								data: info.user_id
							})
						} else {
							if (res.data.data.send_user == false) {
								uni.$u.toast(this.$t('积分不足，请充值积分'))
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/vip/scorePoint',
									})
								}, 500)
							} else {
								uni.$u.toast(this.$t('对方积分不足'))
							}
						}
					})
				}

				// this.isMessageGo({
				// 	action: 'initiateChat',
				// 	data: info.user_id
				// })
			},
			callPhone(item) {
				if(uni.getStorageSync("user_id") == item.user_id) {
					uni.showToast({
						title: '不能给自己打电话',
						icon: "none",
					});
				} else {
					request_minute({
						user_id: uni.getStorageSync("user_id"),
						target_id: item.user_id,
					}).then(res => {
						if (res.data.data.flag == 1) {
							this.isMessageGo({
								action: 'call',
								data: {
									userId: item.user_id,
									type: res.data.data.type || 1,
								}
							})
						} else {
							uni.showToast({
								title: this.$t('积分不足，请充值积分'),
								icon: "none",
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/vip/scorePoint',
									webview: 'zWebView'
								})
							}, 500)
						}
					})
				}
			},
			// 获取详情
			purchaseDetaile(order_id) {
				purchaseDetaile({
					order_id: order_id,
					user_id: uni.getStorageSync('user_id')
				}).then(res => {
					if (res.data.code == 200) {
						this.detailInfo = res.data.data
					} else {
						// uni.$u.toast(res.data.message)
						uni.$u.toast(res.data[this.plang('message')])
					}
					console.log('res-----', res)
				})
			},
			confirmUnit(e) {
				console.log('2222', e)
				this.model1.compensation_ratio = e[0].label
			},
			afterSalesDetail(orderId) {
				afterSalesDetail({
					user_id: uni.getStorageSync('user_id'),
					order_id: orderId
				}).then(res => {
					console.log('ress-----', res)
					if(res.data.code == 200) {
						if (res.data.data && res.data.data.reason) {
							this.model1.reason = res.data.data.reason
							this.model1.compensation_ratio = res.data.data.compensation_ratio
							this.afterId = res.data.data.id
							res.data.data.image_url.split(',').map(item => {
								this.model1.image_url.push({
									fullurl: item
								})
							})

							if (res.data.data.video_url){
								this.model1.video = [{
									fullurl: this.getImageUrl(this.video_url),
									url: this.getImageUrl(this.video_url)
								}]
							}
							this.firstUpload = false
						} else {
							this.firstUpload = true
						}
						console.log('this.model1---', this.model1)
						// this.detailInfo = res.data.data
					}
				})
			},
			back() {
					// uni.navigateBack()
					this.cback()
				},
				getCcateProfessional() {
					getCcateProfessional().then(res => {
						this.typeList = res.data.data
					})
				},
				// 预览视频
				onPreviewVideo(url) {
				  this.previewVideoUrl = url;
				  this.$nextTick(() => {
				    this.$refs.popupVideo.open()
				  })
				},
				 // 删除图片
				 onDelete(index, arr) {
					if(arr == 'img'){
						this.model1.image_url.splice(index, 1)
					}else{
						this.model1[arr].splice(index, 1)
					}
				   this.$forceUpdate();
				 },
				 // 上传视频和图片
				 async onUpload({
				 	type,
				 	size,
				 	count
				 }, keyx) {
				 	let res = await uploadFile(await chooseFile({
				 		type,
				 		size,
				 		count,
				 	}))
				 	if (type == 'image') {
						this.model1.image_url.push(res);
				 	}
				 	if (type == 'video') {
				 		this.model1.video = [res];
				 	}
				 
				 },
				 confirmPlate() {
					 this.btnDis= true
					 uni.showLoading({
					 	title: this.$t('提交中')
					 });
					 this.model1.image_url = this.model1.image_url.length > 0 ? this.model1.image_url.map(item=>item.url).join(",") : ''
					 addAfterSales({ 
						...this.model1,
						buyer_agree_status: '1',
						platform_compensation_ratio: this.plateValue,
						order_id: this.detailInfo.order_id,
						video_url: this.model1.video.map(item=>item.fullurl).join(","),
					}).then(res => {
					 	if (res.data.code == 200) {
					 		// uni.$u.toast(res.data.message)
							 uni.$u.toast(res.data[this.plang('message')])
					 		uni.redirectTo({
					 			url: '/pages/caigou/order/index?status=5&type=1'
					 		})
					 	} else {
					 		// uni.$u.toast(res.data.message)
							 uni.$u.toast(res.data[this.plang('message')])
					 	}
					 	uni.hideLoading()
					 })
				 },
				  submit() {
					   console.log('this.model1999', this.model1)
						const formData=JSON.parse(JSON.stringify(this.model1))
						formData.image_url=formData.image_url.map(item=>item.fullurl).join(",")
						// formData.video=formData.video.map(item=>item.fullurl).join(",")
						formData.video_url=formData.video.map(item=>item.fullurl).join(",")

						formData.order_id = this.detailInfo.order_id
						// console.log(formData)
						// return
						console.log('this.afterId00', this.afterId)
						// return
						this.$refs.model1.validate(valid => {
							if (valid) {
								this.btnDis= true
								uni.showLoading({
									title: this.$t('提交中')
								});
								if (this.firstUpload) {
									addAfterSales({...formData}).then(res => {
										if (res.data.code == 200) {
											// uni.$u.toast(res.data.message)
											uni.$u.toast(res.data[this.plang('message')])
											uni.redirectTo({
												url: '/pages/caigou/order/index?status=5&type=1'
											})
										} else {
											// uni.$u.toast(res.data.message)
											uni.$u.toast(res.data[this.plang('message')])
										}
										uni.hideLoading()
									})
								} else {
									console.log('this.afterId00', this.afterId)
									updateAfterSales({
										...formData,
										after_id: this.afterId
									}).then(res => {
										if (res.data.code == 200) {
											// uni.$u.toast(res.data.message
											uni.$u.toast(res.data[this.plang('message')])
											uni.redirectTo({
												url: '/pages/caigou/order/index?status=5&type=1'
											})
										} else {
											// uni.$u.toast(res.data.message)
											uni.$u.toast(res.data[this.plang('message')])
										}
										uni.hideLoading()
									})
								}
								
							} else {
								uni.$u.toast(this.$t('请检查是否有未上传内容'))
							}
						})
				  }
		}
	}
</script>

<style lang="scss">
	
	@import '@/assets/appScss.scss';
	// @import './index.scss';
	// @import './orderDetail/index.scss';
	page {
		background: #F6F7FB;
		height: auto !important;
	}
	uni-page {
		height: auto !important;
	}
	.base-info {
	  display: flex;
	  align-items: center;
	  justify-content: flex-start;
	  padding: 24rpx;
	  margin-left: 24rpx;
	  margin-right: 24rpx;
		margin-bottom: 20rpx;
		border-radius: 26rpx;
		
		// background: linear-gradient(180deg, #C7E2FF -33.45%, #FFF 91.37%);
		box-shadow: 0px 4rpx 12rpx 0px rgba(199, 226, 255, 0.35);
		background: #fff;
	
	.left-avatar {
	  display: flex;
	  align-items: center;
	  margin-right: 10rpx;
	  // flex: 1;
	
	  .avatar-w {
	    margin-right: 22rpx;
	    position: relative;
	    top: -6rpx;
	
	    .avatar {
	      width: 96rpx;
	      height: 96rpx;
	      padding: 2rpx;
	      background: #fff;
	      border-radius: 10rpx;
	      overflow: hidden;
	      transform: rotate(-15deg);
	      position: relative;
	      top: 10rpx;
	      border: 3rpx solid #fff;
	
	      image {
	        width: 100%;
	        height: 100%;
	        border-radius: 18rpx;
	      }
	    }
	
	    .country {
	      box-sizing: border-box;
	      padding: 2rpx;
	      background: #fff;
	      border-radius: 8rpx;
	      display: inline-block;
	      position: absolute;
	      bottom: -12rpx;
	      left: 4rpx;
	      border: 5rpx solid #fff;
	
	      image {
	        border-radius: 4rpx;
	        width: 80rpx;
	        height: 30.3rpx;
	        display: block;
	      }
	    }
	  }
	}
	}
	.empty {
		width: 100%;
		height: 30rpx;
	}
	.titleSty {
		color: #262728;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 600;
		// padding-top: 34rpx;
		margin-left: 14rpx;
		position: relative;
		.inp-li {
		  .title {
		    padding-top: 22rpx;
		    padding-bottom: 14rpx;
		    color: #262728;
		    font-size: 28rpx;
		    font-weight: 500;
		    text {
		      color: #FF010B;
		    }
		  }
		  .inp {
		    height: 80rpx;
		    border-radius: 18rpx;
		    background: #F7F7F7;
		    padding: 0 24rpx;
		    display: flex;
		    align-items: center;
		    input {
		      flex: 1;
		      margin-right: 40rpx;
		      color: #606366;
		      font-size: 26rpx;
		      font-weight: 400;
		    }
		    .aroow {
		      width: 44rpx;
		      height: 44rpx;
		      image {
		        width: 100%;
		        height: 100%;
		      }
		    }
		  }
		}
	}
		.formSty {
			height: auto;
			padding-bottom: 200rpx;
			/deep/ .u-form-item__body {
				padding: 0;
			}
		}
		/deep/ .u-form {
				border: transparent !important;
				height: auto;
		}
		.smallInputSty {
			width: 194rpx;
			height: 80rpx;
			flex-shrink: 0;
			border-radius: 500rpx;
			border: 2rpx solid #D8D8D8;
			// background: #F7F7F7;
			color: #333;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 28rpx;
		
			/* 116.667% */
			/deep/ .uni-input-input,
			.uni-input-placeholder {
				text-align: center;
			}
		}
		.unitSty {
				width: 150rpx;
				height: 80rpx;
				flex-shrink: 0;
				border-radius: 500rpx;
				border: 2rpx solid #D8D8D8;
				line-height: 80rpx;
				text-align: center;
				.commonSty {
					color: #333;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
				}
				.acticeUnitSty {
					color: #278AFF;
				}
		}
		.badBtn {
			width: 100%;
			height: 80rpx;
			border-radius: 18rpx;
			// background: #F7F7F7;
			// border: 1rpx solid #dcdfe6;
			display: flex;
			justify-content: space-between;
		}
		/deep/ .u-hairline-border::after {
			border: 2rpx solid #D8D8D8 !important;
			// opacity: 1 !important;
			// border: transparent !important;
		}
	.contentBg {
		background-color: #fff;
		padding: 0 24rpx;
		// margin-left: 24rpx;
		// margin-right: 24rpx;
		border-radius: 18px;
		padding-bottom: 35rpx;
		/deep/ .u-form-item__body__right__message {
			margin-left: 0 !important;
		}
		/deep/ .u-icon__icon {
			font-size: 52rpx !important;
		}
		/deep/ .u-border-bottom{
			// border-bottom: none;
			// display: none;
			position: inherit;
		}
		/deep/ .u-add-wrap {
			// display: none !important;
			color: #D9D9D9;
			font-size: 20rpx;
		}
		/deep/ .u-add-tips {
			display: none !important;
		}
		/deep/ .u-input--border {
			border-radius: 18rpx !important;
		}
		/deep/ .u-form-item {
			line-height: 50rpx !important;
			color: #0e0e0e !important;
		}
	}
	.textareaSty {
		width: 100%;
		height: 226rpx !important;
		border-radius: 18rpx;
		border: 2rpx solid #D8D8D8;
		// background: #F7F7F7;
		margin-top: 24rpx;
	}
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		z-index: 20;
		.footer-wrapper {
		  overflow: hidden;
			// padding: 16rpx 30rpx;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  width: 100%;
		  .btn {
		    // width: 80%;
		    height: 94rpx;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    color: #FFF;
		    font-weight: 400;
			  &.blueBuy {
				  width: 100%;
				border-radius: 10rpx;
				  background-color: #007AFF;
				font-size: 30rpx;
			  }
		    &.warning {
				width: 80%;
				border-radius: 10rpx;
		      background-color: #FF6A00;
				font-size: 30rpx;
		    }
		    &.blue {
				width: 80%;
				border-radius: 10rpx;
		      background-color: #007AFF;
				font-size: 30rpx;
		    }
		    &.lvse {
				width: 80%;
				border-radius: 10rpx;
		      background-color: #06C36E;
				font-size: 30rpx;
		    }
			  &.bluePart {
			  		width: 50%;
					border-radius: 10rpx 0 0 10rpx;
					background-color: #007AFF;
				font-size: 30rpx;
			  }
			  &.green {
				  width: 50%;
					border-radius:  0 10rpx 10rpx 0;
				  background-color: #06C36E;
				font-size: 30rpx;
			  }
		  }
		}
		.btn_blue{
			width: 97%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 18rpx;
			// border: 2rpx solid rgba(3, 189, 130, 0.10);
			background-color: #007AFF;
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.btn_item{
			text-align: center;
			padding:0 10rpx;
			.name{
				color: #8C8C8C;
				font-size: 20rpx;
				line-height: 22rpx;
			}
		}
		.ico{
			width: 42rpx;
			height: 42rpx;
		}
	}
	.commonKindSty {
		width: 150rpx;
		height: 64rpx;
		background-color: #F7F7F7;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 64rpx;
		letter-spacing: 0px;
		color: #1D1D1D;
		text-align: center;
		border-radius: 500rpx;
	}
	.activeKindSty {
		background-color: #D7E9FF;
		border: 1px solid #278AFF;
		color: #278AFF;
	}
	.user-sty {
		background-image: url('../../static/userLogoBg.png');
		background-size: 100% 100%;
		margin-left: 12rpx;
		min-width: 120rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 20rpx;
		line-height: 30rpx;
		box-shadow: 0rpx 1.25rpx 0.75rpx 0rpx #D061024D;
		color: #FFFFFF;
		text-align: center;
		padding-left: 26rpx;
	}
	.right-numwrap {
	  display: flex;
	  align-items: center;
	
	  .li {
	    margin-left: 30rpx;
	
	    &:first-child {
	      margin-left: 0;
	    }
	
	    text-align: center;
	
	    .txt {
	      color: #606366;
	      font-size: 26rpx;
	      font-weight: 400;
	      margin-bottom: 8rpx;
	      white-space: nowrap;
	    }
	
	    .num {
	      color: #262728;
	      font-size: 26rpx;
	      font-weight: 500;
	    }
	  }
	}
	.getInfo{
		height: 52rpx;
		width:140rpx;
		font-size: 22rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid #D8D8D8;
		border-radius: 10rpx;
		margin-top: 30rpx;
		margin-left: 20rpx;
	}
	.uploads {
	     display: flex;
	     align-items: center;
	     flex-wrap: wrap;
	     .img {
	       width: 150rpx;
	       height: 150rpx;
	       margin-right: 30rpx;
	       position: relative;
	       margin-bottom: 24rpx;
	       box-sizing: border-box;
	       &:nth-child(n + 4){
	         margin-bottom: 0;
	       }
	      
	       .delete {
	         background-color: #BEBEC0;
	         width: 30rpx;
	         height: 30rpx;
	         position: absolute;
	         right: -15rpx;
	         top: -15rpx;
	         display: flex;
	         align-items: center;
	         justify-content: center;
	         border-radius: 50%;
	         z-index: 2;
	         .lien {
	           width: 18rpx;
	           height: 4rpx;
	           background-color: #fff;
	           border-radius: 2rpx;
	         }
	       }
	
	       &:last-child {
	         margin-right: 0;
	       }
	       image {
	         width: 100%;
	         height: 100%;
	         border-radius: 12rpx;
	       }
	       &.zhan {
	         border-radius: 12rpx;
	         .paly {
	           width: 50rpx;
	           height: 50rpx;
	           position: absolute;
	           top: 50%;
	           left: 50%;
	           transform: translate(-50%,-50%);
	         }
	       }
	     }
	   }


		 .bg-sss {
				background-color: #F7F7F7;
				border-radius: 10rpx;
				padding: 0 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				width: 100%;
			
		 }
		 .r_between{
		.user-sty{
			padding:0 10rpx;
			background-image:none;
			border-radius: 500px;
			background: linear-gradient(90deg, #FF7000 0%, #FFA245 100%);
			box-shadow: -4px 4px 6px 0px rgba(255, 203, 151, 0.46) inset, -2px -3px 9.9px 0px #FFBE7C inset, 0px 4px 13.8px 0px #DEE1EF;


		}
	}
</style>
